<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <template #top>
      <u-navbar
        back-text=""
        :title="navTitle"
        :background="navBackground"
        back-icon-size="30rpx"
        :is-fixed="false"
        title-color="#000"
        back-icon-color="#000"></u-navbar>
    </template>
    <view w-full px-20rpx box-border pt-20rpx>
      <nut-swipe-group lock>
        <nut-swipe v-for="item in result" name="swipe1" rounded-20rpx>
          <view relative w-710rpx box-border px-20rpx mb-20rpx bg="#fff" rounded-20rpx @click="toDetail(item)">
            <view w-full flex py-30rpx style="border-bottom: 1px solid #eeeeee">
              <image w-122rpx h-122rpx rounded-full mr-40rpx shrind-0 :src="item?.face || '/static/default.png'"></image>
              <view h-122rpx flex flex-col>
                <view text-32rpx font-bold>{{ item.nickName }}</view>
                <view text-24rpx mt-12rpx>绑定手环：{{ item.bindMemberCardCount }}</view>
                <view text-24rpx>绑定电子票：{{ item.bindTicketNoCount }}</view>
              </view>
            </view>
            <view w-full flex justify-between items-center h-90rpx text-24rpx>
              <view>最后登录时间：{{ item.lastLoginDate }}</view>
              <view v-if="item.parentId !== '0' && !isSelect" flex items-center @click.stop="toEdit(item.id)">
                <image w-30rpx h-30rpx mr-10rpx src="@/pages/familyMember/static/edit.png"></image>
                <view>编辑</view>
              </view>
            </view>
            <view
              absolute
              right-0
              top-0
              w-120rpx
              h-60rpx
              rounded-tr-20rpx
              rounded-bl-40rpx
              text-24rpx
              text="#fff"
              flex
              justify-center
              items-center
              :style="{ backgroundColor: item.parentId === '0' ? '#FCC300' : '#B7B7B7' }">
              {{ item.parentId === '0' ? '主账号' : relation[item.memberRelation] }}
            </view>
          </view>

          <!-- <template #right v-if="item.parentId !== '0' && !isSelect">
            <view
              w-160rpx
              h-full
              flex
              flex-col
              justify-center
              items-center
              bg="#D14141"
              rounded-tr-20rpx
              rounded-br-20rpx
              @click="confirmDel(item.id)">
              <image w-40rpx h-40rpx mr-10rpx src="@/pages/familyMember/static/delete.png"></image>
              <view text="#fff" text-28rpx mt-16rpx>删除</view>
            </view>
          </template> -->
        </nut-swipe>
      </nut-swipe-group>
    </view>
    <template v-if="!isSelect" #bottom>
      <view w-full px-40rpx pb-46rpx pt-20rpx box-border>
        <view
          w-670rpx
          h-100rpx
          rounded-50rpx
          bg="#FCC300"
          flex
          justify-center
          items-center
          font-500
          text="#000"
          text-32rpx
          @click="toAddMember">
          添加成员
        </view>
      </view>
    </template>
  </z-paging>

</template>

<script setup lang="ts">
import { getMyFamilyMemberList, deleteFamilyMember, changeFamilyMember } from '@/api/familyMember'
import { onLoad, onShow } from '@dcloudio/uni-app'
import uNavbar from '@/components/navbar/index.vue'
import config from '@/config/config'
import stroage from '@/utils/storage'
const navBackground = ref({
  background: 'url(' + config.yellowNavBg + ') no-repeat'
})
const paging = ref<any>(null)
const dataList = ref<any>([])

const isSelect = ref(false)

const navTitle = ref('我的成员')
const result = ref<any>([])


const queryList = (pageNo: number, pageSize: number) => {
  getMyFamilyMemberList()
    .then((res: any) => {
      paging.value.setLocalPaging(res.data.result)
    })
    .catch(() => {
      paging.value.setLocalPaging(false)
    })
}

const relation = ref<any>({
  1: '父子',
  2: '父女',
  3: '母子',
  4: '母女',
  5: '父母',
  6: '配偶',
  7: '朋友'
})
function toAddMember() {
  uni.navigateTo({
    url: '/pages/familyMember/addMember'
  })
}

function toDetail(item: any) {
  if (isSelect.value) {
    changeFamilyMember(item.id).then((res: any) => {
      stroage.setCurrentMember(item)
      uni.showToast({
        title: '切换成功',
        icon: 'none',
        duration: 3000
      })
      uni.navigateBack({
        delta: 1 // 回退前 delta(默认为1) 页面数
      })
    })
    return
  }
  uni.navigateTo({
    url: '/pages/familyMember/memberDetail?id=' + item.id
  })
}

function toEdit(id: string) {
  uni.navigateTo({
    url: '/pages/familyMember/addMember?id=' + id
  })
}



function confirmDel(id: string | number) {
  uni.showModal({
    title: '提示',
    content: '是否确认删除?',
    confirmColor: '#FCC300',
    cancelColor: '#707175',
    success(res) {
      if (res.confirm) {
        uni.showLoading({
          title: '删除中...'
        })
        deleteFamilyMember(id)
          .then((res: any) => {
            uni.showToast({
              title: '删除成功',
              icon: 'none'
            })
            init()
          })
          .finally(() => {
            
          })
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}

function init() {
  getMyFamilyMemberList().then((res: any) => {
    result.value = res.data.result
  })
}

onMounted(() => {})
onLoad((options: any) => {
  isSelect.value = options.isSelect == 1
  if (isSelect.value) {
    navTitle.value = '切换成员'
  }
})
onShow(() => {
  init()
})
</script>
<style>
page {
}
</style>
<style scoped lang="scss"></style>
